import React, { memo } from "react";
import { NavBar } from "antd-mobile";
import { useLocation, useNavigate } from "react-router-dom";
const MyNavbar = memo(() => {
  let location = useLocation();
  let navigate = useNavigate();
  const tabs = [
    {
      key: "/home",
      title: "首页",
      back: "",
      onback: () => {
        navigate(-1);
      },
    },
    {
      key: "/about",
      title: "待办",
      back: "",
      onback: () => {
        navigate(-1);
      },
    },
    {
      key: "/message",
      title: "消息",
      back: "",
      onback: () => {
        navigate(-1);
      },
    },
    {
      key: "/my",
      title: "我的",
      back: "",
      onback: () => {
        navigate(-1);
      },
    },
  ];
  // 封装动态改变顶部导航文字的函数
  function getItem() {
    return tabs.find((item) => {
      return location.pathname.includes(item.key);
    });
  }
  let item = getItem();
  return (
    <div>
      <NavBar back={item.back} onBack={item.onback}>
        {item.title}
      </NavBar>
    </div>
  );
});

export default MyNavbar;
